<template>
  <div class="bg-[#f6f7fb] dark:bg-transparent">
    <!-- <div class="flex justify-between ">
      <div v-auth="'business.control.command'">
        <el-button type="primary" plain size="small" v-for="(item, index) in deviceinfo?.commandInfo" :key="index"
          @click="commanddevice(item)"> {{ isNullOrEmpty(item.commandName) }}</el-button>
      </div>
    </div> -->
    <!-- 底部 -->
    <div class="h-[800px] flex gap-[16px]">
      <!-- 左侧 -->
      <div
        class="flex-[308] relative p-[16px] dark:bg-[rgba(46,51,73,0.6)] bg-[#fff] flex flex-col"
      >
        <div class="flex items-center">
          <div
            class="w-[4px] h-[15px] bg-[#2478CE] rounded-[2px] mr-[11px]"
          ></div>
          <div
            class="text-[16px] font-medium leading-[1] mr-[11px] dark:text-[#FFFFFF]"
          >
            运行状态
          </div>
          <div class="text-[14px] text-[#9095A8;] font-medium leading-[1]">
            {{ isNullOrEmpty(currentdatas?.CreatedAt) }}
          </div>
        </div>
        <div class="flex-1 h-0 relative">
          <el-scrollbar>
            <div class="grid grid-cols-2 gap-[16px] mt-[16px]">
              <div
                v-for="(item, index) in deviceinfo?.structInfo"
                :key="index"
                class="rounded-[4px] bg-[#F6F7FB] dark:bg-[#2E3349]"
              >
                <div
                  class="text-[18px] font-bold font-[D-DIN] text-center pt-[22px] leading-[1] dark:text-[#FFFFFF]"
                >
                  {{
                    isNullOrEmpty(`${currentdatas[item?.fieldAlias] ?? "--"} `)
                  }}{{ item.unit }}
                </div>
                <div
                  class="text-[14px] text-center leading-[1] pt-[12px] pb-[21px] dark:text-[#D6D6D6]"
                >
                  {{ isNullOrEmpty(isNullOrEmpty(item?.fieldName)) }}
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!-- 右侧 -->
      <div
        class="flex-[832] relative p-[16px] dark:bg-[rgba(46,51,73,0.6)] bg-[#fff] rounded-[4px]"
      >
        <div class="flex items-center">
          <div
            class="w-[4px] h-[15px] bg-[#2478CE] rounded-[2px] mr-[11px]"
          ></div>
          <div
            class="text-[16px] font-medium leading-[1] mr-[11px] dark:text-[#FFFFFF]"
          >
            数据分析
          </div>
        </div>

        <div class="mb-[16px]">
          <div
            class="flex justify-between bg-[#F6F7FB] dark:bg-[#2E3349] mt-[16px]"
          >
            <div
              v-for="(item, key) in topText"
              :key="key"
              class="text-center flex-1 pt-[27px] pb-[19px]"
            >
              <div class="">
                <div
                  class="leading-[1] text-[18px] font-bold font-[D-DIN]"
                  style="
                    background: linear-gradient(
                      0deg,
                      #5784e9 0%,
                      #ffffff 98.92578125%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  "
                >
                  <div v-if="topText[key].value <= 999">
                    {{ topText[key].value }}
                  </div>
                  <div v-else>999+</div>
                </div>
                <div class="leading-[1] pt-[12px] text-[14px] font-normal">
                  {{ topText[key].text }}
                </div>
              </div>
            </div>
          </div>

          <!-- echart -->
          <div
            class="line-card mt-[16px] dark:bg-[rgba(46,51,73,0.6)] bg-[#fff] rounded-[4px]"
          >
            <div
              class="text-[14px] leading-[1] pt-[24px] pl-[24px] pb-[21px] dark:text-[#D6D6D6]"
            >
              近15日告警态势
            </div>
            <lines :data="linesData" :height="250" />
          </div>
          <div
            class="bar-card mt-[16px] dark:bg-[rgba(46,51,73,0.6)] bg-[#fff] rounded-[4px]"
          >
            <div
              class="text-[14px] leading-[1] pt-[24px] pl-[24px] pb-[21px] dark:text-[#D6D6D6]"
            >
              告警事件统计
            </div>
            <bar :data="barData" :height="250" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import dataselect from "./dataselect.vue";
import { addDialog } from "@/components/ReDialog";
import {
  getRealTimeData as currentdata,
  getdevicealarm,
  commandconfig
} from "@/api/screen/index";
import { isNullOrEmpty } from "@/utils/functions";
import bar from "@/views/operate/device-management/device-management/components/bar.vue";
import lines from "@/views/operate/device-management/device-management/components/line.vue";
import { isEmpty } from "@pureadmin/utils";
const props = defineProps({
  deviceId: {
    type: String,
    default: ""
  },
  deviceinfo: {
    type: Object,
    default: () => ({})
  }
});
const topText = ref({
  today: {
    text: "今日告警",
    value: 0
  },
  week: {
    text: "本周告警",
    value: 0
  },
  month: {
    text: "本月告警",
    value: 0
  },
  year: {
    text: "本年告警",
    value: 0
  },
  wait: {
    text: "待确认",
    value: 0
  },
  dealing: {
    text: "处理中",
    value: 0
  }
});
const currentdatas: any = ref({});
const formRef = ref(null);
const selectidvalue = ref(null);
const timer = ref(null);
onMounted(() => {
  getdatasa()
  timer.value = setInterval(() => {
    getdatasa()
  }, 5000);

  devicealarm(); //获取曲线图数据
});
function getdatasa(){
  currentdata({ deviceId: props.deviceId }).then(res => {
    currentdatas.value = res.result.data;
  });
}
onBeforeUnmount(() => {
  timer.value && clearInterval(timer.value);
});
const linesData = ref({
  endValue: 11,
  height: "200px",
  data: [],
  xAxis: []
}); // 折线图数据

/** 层叠柱状图 */
const barData = ref({
  endValue: 12,
  height: "200px",
  data: [],
  xAxis: []
});
const devicealarm = () => {
  //获取统计数据
  getdevicealarm({ deviceId: props.deviceId }).then(res => {
    for (const key in res.result) {
      if (topText.value[key]) {
        topText.value[key].value = res.result[key];
      }
    }

    if (!isEmpty(res.result?.alarmDays)) {
      //近15日
      linesData.value.xAxis = res.result.alarmDays.xAxis;
      linesData.value.data.push(
        ...res.result?.alarmDays.data.map((item, index) => {
          const colors = ["#07C7E0", "#5069DA", "#EEBC66"];
          return {
            name: item.name,
            value: item.value,
            color: colors[index]
          };
        })
      );
    }

    if (!isEmpty(res.result?.alarmMonth)) {
      //告警统计
      barData.value.xAxis = res.result.alarmMonth.xAxis;
      barData.value.data.push(
        ...res.result?.alarmMonth.data.map((item, index) => {
          const colors = ["#07C7E0", "#EEBC66", "#5069DA"];
          return {
            name: item.name,
            value: item.value,
            color: colors[index]
          };
        })
      );
    }
  });
};
const commanddevice = (item: any) => {
  selectidvalue.value = null;
  if (item.paramType == 1) {
    ElMessageBox.confirm(
      `确定要执行${item.commandName}命令吗?`,
      item.commandName,
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }
    ).then(() => {
      getControlops({
        deviceId: props.deviceId,
        commandId: item.commandId
      }).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: res.msg
          });
        }
      });
    });
  } else if (item.paramType == 2) {
    ElMessageBox.prompt(`请输入参数`, item.commandName, {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      inputPlaceholder: `请输入${item.value2[0]}-${item.value2[1]}`,
      inputErrorMessage: `请输入${item.value2[0]}-${item.value2[1]}`,
      inputValidator: value => {
        item.value2 = item.value2.map(Number);
        if (value) {
          if (
            Math.min(...item.value2) <= parseFloat(value) &&
            parseFloat(value) <= Math.max(...item.value2)
          ) {
            return true;
          } else {
            return `请输入${item.value2[0]}-${item.value2[1]}之间的参数`;
          }
        } else {
          return `请输入参数`;
        }
      }
    }).then(({ value }) => {
      getControlops({
        deviceId: props.deviceId,
        commandId: item.commandId,
        commandArg: value
      }).then(res => {
        ElMessage({
          type: "success",
          message: res.msg
        });
      });
    });
  } else {
    addDialog({
      title: item.commandName,
      width: "428px",
      draggable: true,
      fullscreenIcon: true,
      props: {
        options: item.value3,
        modelValue: null
      },
      hideFooter: false,
      closeOnClickModal: false,
      contentRenderer: () =>
        h(dataselect, {
          ref: formRef,
          "onUpdate:modelValue": val => {
            selectidvalue.value = val;
          }
        }),
      openAutoFocus({ options, index }) {
        options.props = {
          isLoading: true,
          modelValue: null,
          options: item.value3
        };
      },
      beforeSure: (done, { options }) => {
        if (selectidvalue.value == null) {
          ElMessage({
            type: "warning",
            message: "请选择"
          });
          return;
        }
        getControlops({
          deviceId: props.deviceId,
          commandId: item.commandId,
          commandArg: selectidvalue.value
        }).then((res: any) => {
          if (res.code == 200) {
            done();
            ElMessage({
              type: "success",
              message: res.msg
            });
          }
        });
      }
    });
  }
};
</script>
